<template>
  <div class="YWC">
    <div class="ele-title-1"><h4>订单详情</h4></div>
    <div v-if="goodsInfo.state == 302" class="ele-title-2">
      <h2>状态:待用户自提</h2>
    </div>
    <div v-if="goodsInfo.state == 301" class="ele-title-2">
      <h2>状态:待用户收货</h2>
      <p>剩余 {{ h }}小时 {{ m }}分钟 {{ s }}秒自动收货</p>
    </div>
    <div v-if="goodsInfo.state == 401" class="ele-title-2">
      <h2>状态:使用中</h2>
    </div>
    <div v-if="goodsInfo.state == 501" class="ele-title-2">
      <h2>状态:待商家取货</h2>
    </div>
    <div v-if="goodsInfo.state == 502" class="ele-title-2">
      <h2>状态:待商户收货</h2>
    </div>
    <div v-if="goodsInfo.state == 503" class="ele-title-2">
      <h2>状态:待用户结算</h2>
    </div>
    <div v-if="goodsInfo.state == 801" class="ele-title-2">
      <h2>状态:已完成</h2>
    </div>
    <div v-if="goodsInfo.state == 601" class="ele-title-2">
      <h2>状态:订单取消</h2>
    </div>
    <div v-if="goodsInfo.state == 701" class="ele-title-2">
      <h2>状态:超时已关闭</h2>
    </div>
    <div class="ele-Payment">
      <div class="Payment-top">
        <p class="cus-font">
          <span>订单号:</span><span>{{ goodsInfo.orderSn }}</span>
        </p>
        <p>
          <span>交易号:</span><span v-if="(goodsInfo.state == 701 && goodsInfo.payId) || goodsInfo.state != 701">{{ goodsInfo.payId }}</span>
          <span v-if="goodsInfo.selfCode" style="margin-left: 20px;">自提码:{{ goodsInfo.selfCode }}</span>
        </p>
      </div>
      <div class="Payment-bottom">
        <p>
          <span>下单时间:</span><span>{{ goodsInfo.addTime }}</span>
        </p>
        <p v-if="goodsInfo.state != 302 || goodsInfo.state != 701 || (goodsInfo.state == 701 && goodsInfo.payTime )">
          <span>付款时间:</span><span>{{ goodsInfo.payTime }}</span>
        </p>
        <!--        <p v-if="goodsInfo.state != 302">
          <span>发货时间:</span><span>{{ goodsInfo.deliveryTime }}*</span>
        </p>-->
      </div>
    </div>
    <!-- 使用中 -->
    <div v-if="goodsInfo.state == 401" class="ele-button">
      <el-button
        class="ele-btn"
        type="primary"
        @click="showReback"
      >归还</el-button>
      <el-button
        class="ele-btn"
        type="primary"
        @click="showBuyout"
      >买断</el-button>
    </div>
    <!-- 待用户收货 -->
    <div v-if="goodsInfo.state == 301" class="ele-button">
      <el-button
        class="ele-btn"
        type="primary"
        @click="refund"
      >退货/退款</el-button>
      <el-button
        class="ele-btn"
        type="primary"
        @click="submitReceive"
      >确认收货</el-button>
    </div>
    <!-- 待用户自提 -->
    <div v-if="goodsInfo.state == 302" class="ele-button">
      <el-button class="ele-btn" type="primary" @click="goDelivery(goodsInfo)">已取货</el-button>
      <!--      <el-button
        class="ele-btn"
        style="width: 200px;"
        type="primary"
        @click="changeOrderStatus"
      >变更当前子订单状态</el-button>-->
    </div>

    <!-- 待取货 -->
    <div v-if="goodsInfo.state == 501" class="ele-button">
      <el-button
        class="ele-btn"
        type="primary"
        @click="pickUpOrder"
      >取货</el-button>
      <!--      <el-button
        class="ele-btn"
        style="width: 200px;"
        type="primary"
        @click="changeOrderStatus"
      >变更当前子订单状态</el-button>-->
    </div>

    <!-- 待商户收货 -->
    <!--    <div v-if="goodsInfo.state == 502" class="ele-button">
      <el-button
        class="ele-btn"
        style="width: 200px;"
        type="primary"
        @click="changeOrderStatus"
      >变更当前子订单状态</el-button>
    </div>-->

    <!-- 待用户结算 -->
    <!--    <div v-if="goodsInfo.state == 503" class="ele-button">
      <el-button
        class="ele-btn"
        style="width: 200px;"
        type="primary"
        @click="changeOrderStatus"
      >变更当前子订单状态</el-button>
    </div>-->
    <!-- 包裹信息 -->
    <div v-if="goodsInfo.state != 501 && goodsInfo.state != 302 && goodsInfo.state != 301 && returnList.length > 0" class="custom-radio">
      <h4>收货信息</h4>
      <el-radio-group v-model="shxxBg">
        <el-radio-button
          v-for="(item, index) in returnList.length > 0 ? returnList.length : 1"
          :key="index"
          :label="index"
        >{{ `包裹${toChinesNum(index + 1)}` }}</el-radio-button>
      </el-radio-group>
    </div>
    <div v-if="goodsInfo.state != 501 && goodsInfo.state != 302 && goodsInfo.state != 301 && returnList.length > 0" class="cus-baoguo">
      <div class="left">
        <div class="tops">
          <div class="cus-btns">
            <p>
              <!-- <el-button
                type="text"
                @click="$router.push({ name: 'TBRBTUModify' })"
              >修改</el-button> -->
            </p>
            <p>
              <el-button
                v-if="goodsInfo.state == 503 || goodsInfo.state == 502"
                type="primary"
                @click="confirmReceipt(returnList[shxxBg]['missionId'])"
              >确认收货</el-button>
            </p>
          </div>
          <div class="cus-middle">
            <p>
              <span>申请时间:</span><span class="margin">{{
                returnList.length > 0 ? returnList[shxxBg].applyTime : '无数据'
              }}</span>
            </p>
          </div>

          <div class="cus-middle">
            <p>
              <span>取货方式:</span><span v-if="returnList.length > 0 && returnList[shxxBg]['returnType'] == 0" class="margin">上门取件</span><span v-if="returnList.length > 0 && returnList[shxxBg]['returnType'] == 1" class="margin">送货到店</span><span v-if="returnList.length > 0 && returnList[shxxBg]['returnType'] == 2" class="margin">自行寄回</span>
            </p>
          </div>
          <div class="cus-middle">
            <p>
              <span>入库状态:</span>
              <span v-if="returnList.length > 0">
                <span
                  v-if="returnList[shxxBg].inStoreState == '0'"
                >未入库</span>
                <span v-else>已入库</span>
              </span>
              <span v-else>无数据</span>
            </p>
            <p>
              <span>入库时间:</span>
              <span>{{
                returnList.length > 0
                  ? returnList[shxxBg].inStoreTime
                  : '无数据'
              }}</span>
            </p>
          </div>
        </div>
        <div class="bottoms">
          <div
            v-for="(item, index) in returnList.length > 0
              ? returnList[shxxBg].goodsList
              : []"
            :key="index"
            class="cus-list"
          >
            <div class="cus-left">
              <img :src="item.goodsPic" alt="">
            </div>
            <div class="cus-right">
              <p>{{ item.goodsName }} {{ 'X' + item.number }}</p>
              <p class="cus-font">规格:{{ item.goodsSpec }}</p>
              <p>设备编号:{{ item.number }} *</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <p class="right-title">配送状态</p>

        <el-steps
          direction="vertical"
          :active="
            returnList.length > 0 ? returnList[shxxBg].stateList.length : 0
          "
          :space="50"
          style="margin-top:30px"
        >
          <el-step
            v-for="(item, index) in returnList.length > 0
              ? returnList[shxxBg].stateList
              : []"
            :key="index"
            :title="item.deliveryTime"
            :description="item.deliveryState"
          />
        </el-steps>

      </div>
    </div>
    <!--*
    *
    *
    *
    *
       发货信息 -->
    <div v-if="packageList.length>0 && goodsInfo.state !== 302" class="custom-radio">
      <h4>发货信息</h4>
      <el-radio-group v-model="fhxxBg">
        <el-radio-button
          v-for="(item, index) in packageList.length "
          :key="index"
          :label="index"
        >{{ `包裹${toChinesNum(index + 1)}` }}</el-radio-button>
      </el-radio-group>
    </div>
    <div v-if="goodsInfo.state !== 302 && packageList.length>0" class="cus-baoguo">
      <div class="left">
        <div class="tops">
          <div class="cus-btns">
            <!-- <p>
              <el-button
                type="text"
                @click="$router.push({ name: 'TBRBTUModify' })"
              >修改</el-button>
            </p> -->
            <!-- <p><el-button type="primary">确认已收货</el-button></p> -->
          </div>
          <div class="cus-middle">
            <p>
              <span>发货时间:</span><span class="margin">
                {{
                  packageList.length > 0
                    ? packageList[fhxxBg].deliveryTime
                    : '无数据'
                }}
              </span>
            </p>
            <p>
              <span>收货时间:</span><span>
                {{
                  packageList.length > 0
                    ? packageList[fhxxBg].deliveryTime
                    : '无数据'
                }}
              </span>
            </p>
          </div>
          <div class="cus-middle">
            <p>
              <span>发货方式:</span><span v-if="packageList.length > 0 && packageList[fhxxBg]['deliverySn'] == 0" class="margin">自提</span><span v-else-if="packageList.length > 0 && packageList[fhxxBg]['deliverySn'] == 1" class="margin">普通配送</span><span v-else-if=" packageList.length > 0 && packageList[fhxxBg]['deliverySn'] == 2" class="margin">快递配送</span>
            </p>
            <!--            <p>
              <el-button
                type="text"
                @click="$router.push({ name: 'TBRBTUModify' })"
              >修改</el-button>
            </p>-->
          </div>
          <p>
            <!--            <span>发货人:</span>
            <span>
              {{
                packageList.length > 0 ? packageList[fhxxBg].optUser : '无数据'
              }}
            </span>-->
          </p>
          <p>
            <span>送货人:</span><span>
              {{
                packageList.length > 0
                  ? packageList[fhxxBg].deliveryUser
                  : '无数据'
              }}
            </span>
          </p>
          <p>
            <span>配货人:</span><span>
              {{
                packageList.length > 0
                  ? packageList[fhxxBg].distributionUser
                  : '无数据'
              }}
            </span>
          </p>
        </div>
        <div class="bottoms">
          <div
            v-for="(item, index) in packageList.length > 0
              ? packageList[fhxxBg].goodsList
              : []"
            :key="index"
            class="cus-list"
          >
            <div class="cus-left">
              <img :src="item.goodsPic" alt="加载失败">
            </div>
            <div class="cus-right">
              <p>{{ item.goodsName +'    '+'X' + item.number }}</p>
              <p class="cus-font">规格:{{ item.goodsSpec }}</p>
              <p>设备编号:*</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <p class="right-title">配送状态</p>
        <el-steps
          direction="vertical"
          :active="
            packageList.length > 0 ? packageList[fhxxBg].stateList.length : 0
          "
          :space="50"
          style="margin-top:30px"
        >
          <el-step
            v-for="(item, index) in packageList.length > 0
              ? packageList[fhxxBg].stateList
              : []"
            :key="index"
            :title="item.deliveryTime"
            :description="item.deliveryState"
          />
        </el-steps>
      </div>
    </div>
    <div class="ele-content-info">
      <ul v-if="goodsInfo.state !=302">
        <li>
          <span class="ele-title-txt">收货信息</span>
          <!--          <el-button type="text" style="margin:0;padding:0px">复制</el-button>-->
        </li>
        <li>
          <span class="ele-font-left">收货人:</span><span class="ele-font">{{ OrderDetail.receiverName }}</span>
        </li>
        <li>
          <span class="ele-font-left">电话:</span><span class="ele-font">{{ OrderDetail.receiverPhone }}</span>
        </li>
        <li>
          <span class="ele-font-left">收货地址:</span><span class="ele-font shdz">{{ OrderDetail.receiverAddress }}</span>
        </li>
      </ul>
      <ul v-if="goodsInfo.state ==302">
        <li>
          <span class="ele-title-txt">自提信息</span>
        </li>
        <li>
          <span class="ele-font-left">自提门店:</span><span class="ele-font">{{ OrderDetail.storeName }}</span>
        </li>
        <li>
          <span class="ele-font-left">门店电话:</span><span class="ele-font">{{ OrderDetail.userPhone }}</span>
        </li>
        <li>
          <span class="ele-font-left">门店地址:</span><span class="ele-font shdz">{{ OrderDetail.storeAddress }}</span>
        </li>
      </ul>
      <ul>
        <li><span class="ele-title-txt">下单信息</span></li>
        <li v-if="goodsInfo.state != 302">
          <span class="ele-font-left">运费:</span><span>{{ OrderDetail.freightPrice }}</span>
        </li>
        <li v-if="goodsInfo.state != 302"><span class="ele-font-left">下单门店:</span><span>{{ OrderDetail.storeName }}</span></li>
        <li v-if="goodsInfo.state != 302">
          <span class="ele-font-left">门店地址:</span><span class="mddz"> {{ OrderDetail.storeAddress }} </span>
        </li>
        <li>
          <span class="ele-font-left">物流:</span><span class="ele-font shdz" />
        </li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">买家信息</span></li>
        <li>
          <span class="ele-font-left">买家:</span><span>{{ OrderDetail.userName }}&nbsp;&nbsp;{{ OrderDetail.userPhone }} </span>
        </li>
        <li>
          <span class="ele-font-left">备注:</span><span />
        </li>
      </ul>

      <ul>
        <li><span class="ele-title-txt">支付信息</span></li>
        <li>
          <span class="ele-font-left">支付方式:</span><span>{{
            OrderDetail.payType == 'WEIXIN'
              ? '微信'
              : OrderDetail.payType == 'WEIXINPAYSCORE'
                ? '支付分'
                : OrderDetail.payType == 'ALIPAY'
                  ? '阿里'
                  : '支付方式未知'
          }}</span>
        </li>
        <li>
          <span class="ele-font-left">支付金额:</span><span>{{ OrderDetail.payAmount }}</span>
        </li>
      </ul>
    </div>

    <div v-if="goodsInfo.state == 302">
      <p><span>配货信息</span> <span>配货员：{{ packInfo.distributionUser }}&nbsp;&nbsp;{{ packInfo.phoneNumber }}</span> <span>配货完成时间：{{ packInfo.deliveryTime }}</span></p>
      <el-col :span="24" type="flex">
        <el-col :span="2"><span>配货图片</span></el-col>
        <el-col :span="22" type="flex">
          <TableColumnGoodsImage v-for="(item,index) in packInfo.imgUrl" ref="TableColumnGoodsImage" :key="index" :src="item" :img-size="'150px'" :big-size="'300px'" style="margin-right: 20px" />
          <!-- <el-image v-for="(item,index) in packInfo.imgUrl" :key="index" :src="item" style="width: 100px;height: 100px"></el-image>-->
        </el-col>
      </el-col>
    </div>

    <div v-for="(item, index) in goodsList" :key="index">
      <div v-if="item.goodsType === 'sale'">
        <el-table
          :data="item.goodsList"
          class="ele-table"
          :span-method="objectSaleSpanMethod"
          :header-cell-style="hearderCellStyle"
        >
          <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">
            <template slot-scope="scope">
              <img
                :src="scope.row.goodsPic"
                width="80"
                height="80"
                alt="加载失败"
              >
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" width="250" fixed="left">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.goodsName }}</span>
                <span
                  v-if="scope.row.deviceType == '0'"
                  class="custom"
                >软链</span>
                <span
                  v-if="scope.row.deviceType == '1'"
                  class="custom"
                >医柜</span>
              </div>
              <div>{{ scope.row.goodsSpec }}</div>
              <div>{{ scope.row.deviceNo }}</div>
            </template>
          </el-table-column>
          <el-table-column label="单价" prop="price" width="200">
            <template slot-scope="scope">
              {{ '￥' + scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="number" width="200">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column label="类型" prop="goodsType" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsType == 'lease'">租赁</span>
              <span v-else>售卖</span>
            </template>
          </el-table-column>
          <el-table-column label="运费" width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>
              <p v-if="scope.row.deliverySn == 'self'">自提配送</p>
              <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>
              <p v-if="scope.row.deliverySn == 'urgent'">加急</p>
              <p>{{ scope.row.freightPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column label="优惠" width="100" />
          <el-table-column label="合计" prop="totalPrice" width="100">
            <template slot-scope="scope">
              {{ '￥' + scope.row.totalPrice }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="orderState" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.orderState == 101">待付款</span>
              <span v-else-if="scope.row.orderState == 201">代发货</span>
              <span v-else-if="scope.row.orderState == 302">待用户自提</span>
              <span v-else-if="scope.row.orderState == 301">待用户收货</span>
              <span v-else-if="scope.row.orderState == 401">使用中</span>
              <span v-else-if="scope.row.orderState == 501">待商家取货</span>
              <span v-else-if="scope.row.orderState == 502">待商户收货</span>
              <span v-else-if="scope.row.orderState == 503">待用户结算</span>
              <span v-else-if="scope.row.orderState == 601">订单取消</span>
              <span v-else-if="scope.row.orderState == 701">超时已关闭</span>
              <span v-else-if="scope.row.orderState == 801">已完成</span>
              <span v-else>{{ scope.row.orderState }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                class="ele-btn"
                style="width: 200px;"
                type="primary"
                @click="changeOrderStatus(item.orderSn,item.goodsType,scope.row.orderState)"
              >变更当前子订单状态</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-bzm">
          <p>备注:{{ item.remark || '无备注' }}</p>
          <p class="ele-p-right">
            <span>子订单号:{{ item.orderSn }}</span><span>门店:{{ item.storeName }}</span>
          </p>
        </div>
      </div>
      <div v-if="item.goodsType === 'lease'">
        <el-table
          :data="item.goodsList"
          class="ele-table"
          :span-method="objectRentSpanMethod"
          :header-cell-style="hearderCellStyle"
        >
          <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">
            <template slot-scope="scope">
              <img
                :src="scope.row.goodsPic"
                width="80"
                height="80"
                alt="加载失败"
              >
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" width="250" fixed="left">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.goodsName }}</span>
                <span
                  v-if="scope.row.deviceType == '0'"
                  class="custom"
                >软链</span>
                <span
                  v-if="scope.row.deviceType == '1'"
                  class="custom"
                >医柜</span>
              </div>
              <div>{{ scope.row.goodsSpec }}</div>
              <div>{{ scope.row.deviceNo }}</div>
            </template>
          </el-table-column>
          <el-table-column label="单价" prop="price" width="100">
            <template slot-scope="scope">
              {{ '￥' + scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="number" width="100">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column label="押金" prop="depositPrice" width="100">
            <template slot-scope="scope">
              {{ scope.row.depositPrice + '元' }}
            </template>
          </el-table-column>
          <el-table-column label="类型" prop="goodsType" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsType == 'lease'">租赁</span>
              <span v-else>售卖</span>
            </template>
          </el-table-column>
          <el-table-column label="运费" width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>
              <p v-if="scope.row.deliverySn == 'self'">自提配送</p>
              <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>
              <p v-if="scope.row.deliverySn == 'urgent'">加急</p>
              <p>{{ scope.row.freightPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column label="优惠" width="100" />
          <el-table-column label="租期" prop="leaseDay" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.leaseDay">
                {{ scope.row.leaseDay }}
              </span>
              <span v-else>————</span>
            </template>
          </el-table-column>
          <el-table-column label="合计" prop="totalPrice" width="100">
            <template slot-scope="scope">
              {{ '￥' + scope.row.totalPrice }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="orderState" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.orderState == 101">待付款</span>
              <span v-else-if="scope.row.orderState == 201">代发货</span>
              <span v-else-if="scope.row.orderState == 302">待用户自提</span>
              <span v-else-if="scope.row.orderState == 301">待用户收货</span>
              <span v-else-if="scope.row.orderState == 401">使用中</span>
              <span v-else-if="scope.row.orderState == 501">待商家取货</span>
              <span v-else-if="scope.row.orderState == 502">待商户收货</span>
              <span v-else-if="scope.row.orderState == 503">待用户结算</span>
              <span v-else-if="scope.row.orderState == 601">订单取消</span>
              <span v-else-if="scope.row.orderState == 701">超时已关闭</span>
              <span v-else-if="scope.row.orderState == 801">已完成</span>
              <span v-else>{{ scope.row.orderState }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                class="ele-btn"
                style="width: 200px;"
                type="primary"
                @click="changeOrderStatus(item.orderSn,item.goodsType,scope.row.orderState)"
              >变更当前子订单状态</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-bzm">
          <p>备注:{{ item.remark || '无备注' }}</p>
          <p class="ele-p-right">
            <span>子订单号:{{ item.orderSn }}</span><span>门店:{{ item.storeName }}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 退货/退款 -->
    <el-dialog :visible.sync="visible" title="退款/退货" :modal="false">
      <div class="TBRBTU-information">
        <el-row :gutter="24">
          <el-col :span="2"><h4 class="cus-h4">类型:</h4></el-col>
          <el-col :span="22">
            <p class="cus-radio">
              <el-radio v-model="istype" label="0">仅退款</el-radio>
              <el-radio v-model="istype" label="1">退货退款</el-radio>
              <el-radio v-model="istype" label="2">换货</el-radio>
            </p>
          </el-col>
        </el-row>
      </div>
      <div class="TBRBTU-information">
        <el-row :gutter="24" class="flex">
          <el-col :span="2"><h4 class="cus-h4">原因:</h4></el-col>
          <el-col :span="22">
            <p class="cus-radio">
              <el-input v-model="backReason" placeholder="请输入原因" />
            </p>
          </el-col>
        </el-row>
      </div>
      <div class="TBRBTU-detail">
        <el-row :gutter="24">
          <el-col :span="2"><h4 class="cus-h4">退货商品</h4></el-col>
          <el-col :span="22">
            <el-table ref="returnGoodsTable" :data="Bindata" @selection-change="selectRefund">
              <el-table-column type="selection" />
              <el-table-column prop="goods" label="商品" width="200">
                <template slot-scope="scope">
                  <div class="cus-list">
                    <div class="cus-left">
                      <el-image
                        style="width: 60px;height: 60px"
                        :src="scope.row.goodsPic"
                        alt=""
                      />
                    </div>
                    <div class="cus-right">
                      <p>{{ scope.row.goodsName }}</p>
                      <p class="cus-font">{{ scope.row.goodsSpec }}</p>
                      <p>设备编号:</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="数量">
                <template slot-scope="scope">
                  <span>x{{ scope.row.number }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="goodsType" label="类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.goodsType == 'lease'">租赁</span>
                  <span v-else>售卖</span>
                </template>
              </el-table-column>
              <el-table-column prop="orderState" label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.orderState == 301">待用户收货</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>

      <div v-if="istype == '1'" class="TBRBTU-mode TBRBTU-information">
        <el-row :gutter="24">
          <el-col :span="2"><h4 class="cus-h4">取货方式</h4></el-col>
          <el-col :span="22">
            <p class="cus-radio">
              <el-radio v-model="isfor" label="1">门店</el-radio>
              <el-radio v-model="isfor" label="2">物流</el-radio>
            </p>
            <div v-if="isfor == '2'" class="cus-wuliu">
              <p>
                <span>物流公司</span><el-select v-model="shipChannel" placeholder="选择物流公司">
                  <el-option
                    v-for="item in shipList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  /></el-select>
              </p>
              <p><span>物流单号</span><el-input v-model="shipSn" placeholder="单行输入" /></p>
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择维护员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="maintainerId">
                    <el-col v-for="(item,index) in maintainerList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>维护员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
            </div>

            <div v-if="isfor == '1'" class="cus-Distribution">
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择配送员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="deliverUserId">
                    <el-col v-for="(item,index) in deliverList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>配送员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择维护员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="maintainerId">
                    <el-col v-for="(item,index) in maintainerList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>维护员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-if="istype == '2'" class="TBRBTU-mode TBRBTU-information">
        <el-row :gutter="24">
          <el-col :span="2"><h4 class="cus-h4">取货方式</h4></el-col>
          <el-col :span="22">
            <p class="cus-radio">
              <el-radio v-model="isfor" label="1">门店</el-radio>
              <el-radio v-model="isfor" label="2">物流</el-radio>
            </p>
            <div v-if="isfor == '2'" class="cus-wuliu">
              <p>
                <span>物流公司</span><el-select v-model="shipChannel" placeholder="选择物流公司">
                  <el-option
                    v-for="item in shipList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  /></el-select>
              </p>
              <p><span>物流单号</span><el-input v-model="shipSn" placeholder="单行输入" /></p>
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择配货员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="packageId">
                    <el-col v-for="(item,index) in packList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>配货员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择维护员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="maintainerId">
                    <el-col v-for="(item,index) in maintainerList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>维护员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
            </div>

            <div v-if="isfor == '1'" class="cus-Distribution">
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择配货员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="packageId">
                    <el-col v-for="(item,index) in packList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>配货员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择配送员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="deliverUserId">
                    <el-col v-for="(item,index) in deliverList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>配送员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择维护员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="maintainerId">
                    <el-col v-for="(item,index) in maintainerList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>维护员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="footer">
        <p class="cus-btn-item">
          <el-button type="primary" @click="refundOrderGoods">提交</el-button>
        </p>
      </div>
    </el-dialog>

    <!-- 选择买断商品 -->
    <el-dialog :visible.sync="visible_0" title="选择买断商品" :modal="false">
      <div class="TBRBTU-detail">
        <el-row :gutter="24">
          <el-col :span="2"><h4 class="cus-h4">买断商品</h4></el-col>
          <el-col :span="22">
            <el-table :data="BuyoutList" @selection-change="selectBuyout">
              <el-table-column type="selection" />
              <el-table-column prop="goods" label="商品" width="200">
                <template slot-scope="scope">
                  <div class="cus-list">
                    <div class="cus-left">
                      <el-image
                        style="width: 60px;height: 60px"
                        :src="scope.row.goodsPic"
                        alt=""
                      />
                    </div>
                    <div class="cus-right">
                      <p>{{ scope.row.goodsName }}</p>
                      <p class="cus-font">{{ scope.row.goodsSpec }}</p>
                      <p>设备编号:</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="数量">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.number" :controls="false" :precision="0" style="width: 50px" @change="changeBuyoutNumber(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column prop="goodsType" label="类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.goodsType == 'lease'">租赁</span>
                  <span v-else>售卖</span>
                </template>
              </el-table-column>
              <el-table-column prop="orderState" label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.orderState==401">使用中</span>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="买断金额(元)">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price" @keyup="changeAmount(scope.row)" @change="changeBuyoutAmout(scope.row)" />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <div class="footer">
        <p class="cus-btn-item">
          <el-button type="primary" @click="submitBuyout">提交</el-button>
        </p>
      </div>
    </el-dialog>

    <!--归还-->
    <el-dialog :visible.sync="visible_reback" title="归还" :modal="false">
      <div class="TBRBTU-detail">
        <el-row :gutter="24">
          <el-col :span="2"><h4 class="cus-h4">归还商品</h4></el-col>
          <el-col :span="22">
            <el-table ref="rebackGoodsTable" :data="rebackGoodsList" @selection-change="selectRebacK">
              <el-table-column type="selection" />
              <el-table-column prop="goods" label="商品" width="200">
                <template slot-scope="scope">
                  <div class="cus-list">
                    <div class="cus-left">
                      <el-image
                        style="width: 60px;height: 60px"
                        :src="scope.row.goodsPic"
                        alt=""
                      />
                    </div>
                    <div class="cus-right">
                      <p>{{ scope.row.goodsName }}</p>
                      <p class="cus-font">{{ scope.row.goodsSpec }}</p>
                      <p>设备编号:</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="数量">
                <template slot-scope="scope">
                  <span>x{{ scope.row.number }}</span>
                  <!--                  <el-input-number v-model="scope.row.number" :controls="false" :precision="0" @change="changeBuyoutNumber(scope.row)" style="width: 50px"></el-input-number>-->
                </template>
              </el-table-column>
              <el-table-column prop="goodsType" label="类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.goodsType == 'lease'">租赁</span>
                  <span v-else>售卖</span>
                </template>
              </el-table-column>
              <el-table-column prop="orderState" label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.orderState == 401">使用中</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>

      <div class="TBRBTU-mode TBRBTU-information">
        <el-row :gutter="24">
          <el-col :span="2"><h4 class="cus-h4">取货方式</h4></el-col>
          <el-col :span="22">
            <p class="cus-radio">
              <el-radio v-model="isfor" label="1">门店</el-radio>
              <el-radio v-model="isfor" label="2">物流</el-radio>
            </p>
            <div v-if="isfor == '2'" class="cus-wuliu">
              <p>
                <span>物流公司</span><el-select v-model="shipChannel" placeholder="选择物流公司">
                  <el-option
                    v-for="item in shipList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  /></el-select>
              </p>
              <p><span>物流单号</span><el-input v-model="shipSn" placeholder="单行输入" /></p>
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择维护员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="maintainerId">
                    <el-col v-for="(item,index) in maintainerList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>维护员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
            </div>

            <div v-if="isfor == '1'" class="cus-Distribution">
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择配送员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="deliverUserId">
                    <el-col v-for="(item,index) in deliverList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>配送员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
              <div class="right" style="width: 250px;margin-right: 20px;">
                <p style="font-size:14px;margin:30px 0px">选择维护员</p>
                <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                  <el-radio-group v-model="maintainerId">
                    <el-col v-for="(item,index) in maintainerList" :key="index" :span="24" style="margin: 10px 0px">
                      <el-radio :label="item.id">
                        <span>维护员:{{ item.userName }} {{ item.phone }}</span>
                      </el-radio>
                    </el-col>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="footer">
        <p class="cus-btn-item">
          <el-button type="primary" @click="submitReback">提交</el-button>
        </p>
      </div>
    </el-dialog>

    <!-- 确认收货选择维护员   -->
    <el-dialog :visible.sync="visible_receipt" title="选择维护人员" :modal="false">
      <el-form :model="defendForm">
        <el-row style="background-color: #F7F7F7">
          <el-form-item required>
            <el-radio-group v-model="defendForm.defend">
              <el-col v-for="(item,index) in defendList" :key="index" :span="24" style="margin: 10px 0px">
                <el-radio :label="item.id">
                  <span v-if="item.id == 'sort'">{{ item.userName }}</span>
                  <span v-else-if=" item.id == 'all'">{{ item.userName }}</span>
                  <span v-else>{{ item.userName }} {{ item.phone }}</span>
                </el-radio>
              </el-col>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">确认</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 切换当前子订单状态   -->
    <el-dialog :visible.sync="visible_subOrder" title="切换当前子订单状态" :modal="false">
      <el-form ref="orderForm" :model="orderForm" :rules="orderRules">
        <el-row style="background-color: #F7F7F7;padding-top: 22px;">
          <el-form-item prop="status" label="子订单状态：">
            <el-select v-model="orderForm.status" placeholder="请选择需要切换的子订单状态">
              <el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSubOrder">确认</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  buyOutLoad, confirmReceiptNormal,
  getUsingReturn,
  postBuyout, postReback,
  postReturn,
  rebackLoad, refundLoad,
  rentOrderDetail, takeByself, updateChildOrderStatus
} from '@/api/order'
import { toChinesNum } from '@/utils/chineseNum'
import { StaffMangeList } from '@/api/customAPI/shop/staffManage'
import { getShipList } from '@/api/auth'
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage'
/* import {StaffMangeList} from "@/api/customAPI/shop/staffManage";*/
export default {
  name: 'DJS',
  components: { TableColumnGoodsImage },
  data() {
    return {
      timer: '',
      d: '',
      h: '',
      m: '',
      s: '',
      startTime: '',
      baseUrl: process.env.VUE_APP_BASE_API,
      // 订单状态
      status: '',
      //
      row: '',
      //
      storeId: null,
      // 订单详情
      OrderDetail: {},
      // 子订单商品列表
      goodsList: [],
      // 详细信息
      goodsInfo: {},
      // 收获信息
      returnList: [],
      // 收货包裹控制
      shxxBg: 0,
      // 发货信息
      packageList: [],
      // 配货员打包信息
      packInfo: null,
      // 发货包裹控制
      fhxxBg: 0,
      /** -------分割线---- */
      visible: false,
      backReason: '',
      visible_0: false,
      visible_receipt: false,
      isfor: '1',
      isDeliveryfor: '1',
      deliverUserId: '',
      deliverList: [],
      maintainerId: null,
      maintainerList: [],
      selectRefundId: [],
      istype: '0',
      Bindata: [],
      /** 确认已收货弹框*/
      defendForm: {
        defend: null
      },
      packageId: null,
      packList: [],
      shipChannel: null,
      shipList: [],
      shipSn: null,
      defendList: [],

      /** 买断数据*/
      BuyoutList: [],
      selectBuyoutId: [],
      /** 归还*/
      visible_reback: false,
      rebackGoodsList: [],
      selectRebackId: [],
      /** 切换子订单状态*/
      visible_subOrder: false,
      orderForm: {
        childOrderCode: null,
        status: null
      },
      statusList: [
        { id: 101, name: '待付款' },
        { id: 201, name: '待发货' },
        { id: 302, name: '待用户自提' },
        { id: 301, name: '待用户收货' },
        { id: 401, name: '使用中' },
        { id: 501, name: '待商家取货' },
        { id: 502, name: '待商户取货' },
        { id: 503, name: '待用户结算' },
        { id: 601, name: '订单取消' },
        { id: 701, name: '超时已关闭' },
        { id: 801, name: '已完成' }
      ],
      orderRules: {
        status: [{ required: true, message: '请选择变更的子订单状态', trigger: ['blur', 'change'] }]
      }
    }
  },
  created() {
    this.initailInfo()
  },
  mounted() {
    this.initailInfo()
  },
  /* activated() {
    this.initailInfo()
  },*/
  methods: {
    toChinesNum,
    initailInfo() {
      const params = this.$route.params
      if (params) {
        this.status = params.status
        this.row = params.rows
        /* console.log(params)*/
        rentOrderDetail({
          state: params.status,
          orderId: params.rows.suboId,
          bigOrderId: params.rows.bigOrderId
        })
          .then(result => {
            /* console.log(result.data.data)*/
            this.storeId = result.data.data.storeId
            if (result.data.data.receiveInfo) {
              this.OrderDetail = result.data.data.receiveInfo
            }
            if (result.data.data.selfPickupList) {
              this.OrderDetail = result.data.data.selfPickupList
            }
            if (params.status == 302) {
              this.packInfo = result.data.data.orderDetailPackageVo
            }

            if (this.status == 301) {
              this.startTime = result.data.data.deliveryTime
              if (this.startTime && this.status == 301) {
                this.countTime()
              }
            }
            this.goodsList = result.data.data.subOrderList
            this.goodsInfo = result.data.data
            this.returnList = result.data.data.returnList
            if (this.status != 701 || (this.status == 701 && result.data.data.packageList)) {
              this.packageList = result.data.data.packageList
            }
          })
          .catch(() => {})
      }
    },
    /** 计算剩余时间*/
    countTime() {
      const overDate = this.startTime.split(' ')[0]
      const endTime = overDate + '  24:00:00'
      const endDate = new Date(endTime)
      const end = endDate.getTime()
      const startDate = new Date()
      const start = startDate.getTime()
      // 时间差
      const leftTime = end - start
      // 定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24)// 天数我没用到，暂且写上
        this.h = Math.floor((leftTime / 1000 / 60 / 60) % 24)
        this.m = Math.floor((leftTime / 1000 / 60) % 60)
        this.s = Math.floor((leftTime / 1000) % 60)
      }
      /* console.log(leftTime)
      console.log(this.s)*/
      setInterval(this.countTime, 1000)
    },
    hearderCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      }
    },

    /** 已取货 */
    goDelivery(info) {
      const params = this.$route.params
      /* console.log(params)
      this.$router.push({
        name: 'TBRBTUModify',
        query: {
          p: this.$ed({
            orderId: params.rows.orderId,
            packId: '',
            state: info.state
          })
        }
      })*/
      this.$confirm('是否确认订单已取货', '确认已收货', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(result => {
        takeByself({ orderId: params.rows.orderId, pickId: this.packInfo.packId })
          .then(result => {
            this.$notify.success({
              title: '成功',
              message: '已确认收货，订单已完成'
            })
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.go(-1)
          })
          .catch(() => {
            this.$notify.error({
              title: '失败',
              message: '确认收货异常'
            })
          })
      })
        .catch(() => {
          this.$notify({
            title: '异常',
            type: 'info',
            message: '已取消操作'
          })
        })
    },

    submitReceive() {
      const params = this.$route.params
      this.$confirm('是否确认订单已收货', '确认已收货', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(result => {
        confirmReceiptNormal({ id: params.rows.orderId })
          .then(result => {
            this.$notify.success({
              title: '成功',
              message: '已确认收货，订单已完成'
            })
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.go(-1)
          })
          .catch(() => {
            this.$notify.error({
              title: '失败',
              message: '确认收货异常'
            })
          })
      })
        .catch(() => {
          this.$notify({
            title: '异常',
            type: 'info',
            message: '已取消操作'
          })
        })
    },

    /** 退货退款，换货*/
    refund() {
      this.visible = true
      refundLoad({ orderId: this.row.suboId }).then(res => {
        this.Bindata = res.data.data
      }).catch(err => {
        return err
      })
      getShipList().then(res => {
        this.shipList = res.data
      }).catch(err => {
        console.log(err)
        this.$message.error('加载物流信息失败')
      })
      StaffMangeList({ page: 1, limit: 0, storeId: this.storeId }).then(res => {
        const staffList = res.data.data.list
        this.packList = []
        this.deliverList = []
        this.maintainerList = []
        staffList.forEach(item => {
          if (item.roles.includes('1')) {
            this.packList.push(item)
          }
          if (item.roles.includes('0')) {
            this.deliverList.push(item)
          }
          if (item.roles.includes('2')) {
            this.maintainerList.push(item)
          }
        })
        this.packList.unshift({
          id: 'all',
          userName: '全部一起抢单',
          phone: ''
        })
        this.packList.unshift({
          id: 'sort',
          userName: '按顺序抢单',
          phone: ''
        })
        this.deliverList.unshift({
          id: 'all',
          userName: '全部一起抢单',
          phone: ''
        })
        this.deliverList.unshift({
          id: 'sort',
          userName: '按顺序抢单',
          phone: ''
        })
        this.maintainerList.unshift({
          id: 'all',
          userName: '全部一起抢单',
          phone: ''
        })
        this.maintainerList.unshift({
          id: 'sort',
          userName: '按顺序抢单',
          phone: ''
        })
      })
    },
    /** 选择退货退款换货商品*/
    selectRefund(v) {
      this.selectRefundId = []
      v.forEach(item => {
        this.selectRefundId.push(item.orderGoodsId)
      })
    },
    /** 确认退货退款换货*/
    refundOrderGoods() {
      if (this.selectRefundId.length == 0) {
        return this.$message.error('商品不能为空')
      }
      if (!this.backReason) {
        return this.$message.error('原因不能为空')
      }
      if (this.istype == '1') {
        if (this.isfor == '1') {
          if (!this.deliverUserId) {
            return this.$message.error('请选择配送员')
          }
          if (!this.maintainerId) {
            return this.$message.error('请选择维护员')
          }
        } else {
          if (!this.shipChannel) {
            return this.$message.error('请选择物流公司')
          }
          if (!this.shipSn) {
            return this.$message.error('请输入物流单号')
          }
          if (!this.maintainerId) {
            return this.$message.error('请选择维护员')
          }
        }
      }
      if (this.istype == '2') {
        if (this.isfor == '1') {
          if (!this.packageId) {
            return this.$message.error('请选择配货员')
          }
          if (!this.deliverUserId) {
            return this.$message.error('请选择配送员')
          }
          if (!this.maintainerId) {
            return this.$message.error('请选择维护员')
          }
        } else {
          if (!this.packageId) {
            return this.$message.error('请选择配货员')
          }
          if (!this.shipChannel) {
            return this.$message.error('请选择物流公司')
          }
          if (!this.shipSn) {
            return this.$message.error('请输入物流单号')
          }
          if (!this.maintainerId) {
            return this.$message.error('请选择维护员')
          }
        }
      }
      const data = {
        id: parseInt(this.row.suboId),
        orderGoodsIds: this.selectRefundId.toString(),
        state: parseInt(this.istype),
        reason: this.backReason,
        ship: parseInt(this.isfor),
        deliveryManId: this.isfor == '1' ? this.deliverUserId : null,
        expressCompany: this.isfor == '2' ? this.shipChannel : null,
        expressCode: this.isfor == '2' ? this.shipSn : null,
        maintainId: this.maintainerId,
        packUserid: this.packageId
      }
      postReturn(data).then(res => {
        this.visible = false
      }).catch(err => {
        console.log(err)
        this.visible = false
      })
    },
    /** 确认已收货弹框加载*/
    confirmReceipt(id) {
      if (id) {
        this.$confirm('是否确认订单已收货', '确认已收货', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(result => {
          getUsingReturn(id)
            .then(result => {
              this.$message.success('已确认收货，订单已完成')
            })
            .catch(() => {})
        })
          .catch(() => {})
      }
    },

    /** 确认已收货 确认维护员提交*/

    /** 变更当前子订单状态*/
    changeOrderStatus(orderSn, goodsType, orderState) {
      this.visible_subOrder = true
      this.orderForm.childOrderCode = orderSn
      const stateList = this.statusList
      this.statusList.forEach((item, index) => {
        if (item.id == orderState) {
          stateList.splice(index, 1)
        }
        if (goodsType == 'sale') {
          if (item.id == 401 || item.id == 501 || item.id == 502 || item.id == 503) {
            stateList.splice(index, 1)
          }
        }
      })
      this.statusList = stateList
    },

    /** 提交修改子订单状态*/
    submitSubOrder() {
      this.$refs.orderForm.validate(v => {
        if (v) {
          this.$confirm('是否变更当前子订单状态?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const data = this.$XEUtils.clone(this.orderForm, true)
            updateChildOrderStatus(data).then(res => {
              this.$notify.success({
                title: '成功',
                message: '子订单状态修改成功'
              })
              this.visible_subOrder = false
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.go(-1)
            }).catch(() => {
              this.$notify({
                type: 'err',
                message: '子订单状态修改异常'
              })
            })
          }).catch(() => {
            this.$notify({
              type: 'info',
              message: '已取消操作'
            })
          })
        }
      })
    },

    /** 买断按钮*/
    showBuyout() {
      this.visible_0 = true

      buyOutLoad({ orderId: this.row.suboId }).then(res => {
        this.BuyoutList = []
        res.data.data.goodsList.forEach(item => {
          this.BuyoutList.push({
            goodsId: item.orderGoodsId,
            goodsName: item.goodsName,
            goodsPic: item.goodsPic,
            goodsSpec: item.goodsSpec,
            goodsType: item.goodsType,
            number: item.number,
            orderState: item.orderState,
            price: 0
          })
        })
      }).catch(err => {
        return err
      })
    },

    /** 选择退货退款换货商品*/
    selectBuyout(v) {
      this.selectBuyoutId = []
      v.forEach(item => {
        this.selectBuyoutId.push(item)
      })
    },

    /** 买断商品数量变更*/
    changeBuyoutNumber(row) {
      if (this.selectBuyoutId.length > 0) {
        const list = []
        for (let i = 0; i < this.selectBuyoutId.length; i++) {
          if (this.selectBuyoutId[i].goodsId == row.goodsId) {
            this.selectBuyoutId[i].number = row.number
          }
          list.push(this.selectBuyoutId[i].goodsId)
        }
        if (!list.includes(row.goodsId)) {
          return this.$message.error('请先选择该商品再修改买断数量')
        }
      } else {
        return this.$message.error('请先选择买断的商品')
      }
    },
    /** 买断金额格式判断*/
    changeAmount(row) {
      this.BuyoutList.forEach((item, index) => {
        if (row.goodsId == item.goodsId) {
          item.price = this.BuyoutList[index].price.replace(/[^0-9.]/g, '')
        }
      })
    },

    /** 买断金额数据*/
    changeBuyoutAmout(row) {
      if (this.selectBuyoutId.length > 0) {
        const list = []
        for (let i = 0; i < this.selectBuyoutId.length; i++) {
          if (this.selectBuyoutId[i].goodsId == row.goodsId) {
            this.selectBuyoutId[i].price = row.price
          }
          list.push(this.selectBuyoutId[i].goodsId)
        }
        if (!list.includes(row.goodsId)) {
          return this.$message.error('请先选择该商品再修改买断金额')
        }
      } else {
        return this.$message.error('请先选择买断的商品')
      }
    },

    /** 买断提交*/
    submitBuyout() {
      if (this.selectBuyoutId.length == 0) {
        return this.$message.error('请选择买断的商品')
      }
      if (this.selectBuyoutId.length > 0) {
        for (let i = 0; i < this.selectBuyoutId.length; i++) {
          if (!this.selectBuyoutId[i].number) {
            return this.$message.error('请输入买断的数量')
          }
          if (this.selectBuyoutId[i].number) {
            if (this.selectBuyoutId[i].number == 0) {
              return this.$message.error('买断的数量不能为零')
            }
          }
          if (!this.selectBuyoutId[i].price) {
            return this.$message.error('请输入买断的金额')
          }
          if (!/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.selectBuyoutId[i].price)) {
            return this.$message.error('买断金额格式不正确')
          }
          if (/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.selectBuyoutId[i].price) && this.selectBuyoutId[i].price > 100000) {
            return this.$message.error('买断金额不能大于100000')
          }
          if (/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.selectBuyoutId[i].price) && this.selectBuyoutId[i].price <= 0) {
            return this.$message.error('买断金额必须大于0')
          }
        }
      }
      const submitList = []
      this.selectBuyoutId.forEach(info => {
        submitList.push({
          goodsId: info.goodsId,
          amount: info.price,
          number: info.number
        })
      })
      postBuyout({ id: parseInt(this.row.suboId), buyOutList: submitList }).then(res => {
        console.log(res.data)
      }).catch(err => {
        console.log(err)
      })
    },

    /** 单击归还*/
    showReback() {
      this.visible_reback = true
      rebackLoad(this.row.suboId).then(res => {
        this.rebackGoodsList = []
        res.data.data.goodsList.forEach(item => {
          this.rebackGoodsList.push({
            goodsId: item.orderGoodsId,
            goodsName: item.goodsName,
            goodsPic: item.goodsPic,
            goodsSpec: item.goodsSpec,
            goodsType: item.goodsType,
            number: item.number,
            orderState: item.orderState
          })
        })
      }).catch(err => {
        console.log(err)
      })
      getShipList().then(res => {
        this.shipList = res.data
      }).catch(err => {
        console.log(err)
        this.$message.error('加载物流信息失败')
      })
      StaffMangeList({ page: 1, limit: 0, storeId: this.storeId }).then(res => {
        const staffList = res.data.data.list
        this.packList = []
        this.deliverList = []
        staffList.forEach(item => {
          if (item.roles.includes('0')) {
            this.deliverList.push(item)
          }
          if (item.roles.includes('2')) {
            this.maintainerList.push(item)
          }
        })
        this.packList.unshift({
          id: 'sort',
          userName: '按顺序抢单',
          phone: ''
        })
        this.deliverList.unshift({
          id: 'all',
          userName: '全部一起抢单',
          phone: ''
        })
        this.deliverList.unshift({
          id: 'sort',
          userName: '按顺序抢单',
          phone: ''
        })
        this.maintainerList.unshift({
          id: 'all',
          userName: '全部一起抢单',
          phone: ''
        })
        this.maintainerList.unshift({
          id: 'sort',
          userName: '按顺序抢单',
          phone: ''
        })
      })
    },

    /** 归还多选*/
    selectRebacK(v) {
      this.selectRebackId = []
      v.forEach(item => {
        this.selectRebackId.push(item.goodsId)
      })
    },

    /** 归还提交*/
    submitReback() {
      if (this.selectRebackId.length == 0) {
        return this.$message.error('商品不能为空')
      }
      if (this.isfor == '1') {
        if (!this.deliverUserId) {
          return this.$message.error('请选择配送员')
        }
        if (!this.maintainerId) {
          return this.$message.error('请选择维护员')
        }
      } else {
        if (!this.shipChannel) {
          return this.$message.error('请选择物流公司')
        }
        if (!this.shipSn) {
          return this.$message.error('请输入物流单号')
        }
        if (!this.maintainerId) {
          return this.$message.error('请选择维护员')
        }
      }
      const data = {
        id: parseInt(this.row.suboId),
        orderIds: this.selectRebackId.toString(),
        ship: parseInt(this.isfor),
        deliveryManId: this.isfor == '1' ? this.deliverUserId : null,
        expressCompany: this.isfor == '2' ? this.shipChannel : null,
        expressCode: this.isfor == '2' ? this.shipSn : null,
        maintainId: this.maintainerId
      }
      postReback(data).then(res => {
        console.log(res.data.data)
      }).catch(err => {
        console.log(err)
      })
    },

    /** 取货*/
    pickUpOrder() {
      const params = this.$dd(this.$route.query.p)
      this.$router.push({
        name: 'TBRBTUModify',
        query: {
          p: this.$ed({
            orderId: params.rows.suboId,
            state: params.status
          })
        }
      })
    },

    objectSaleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 9) {
        if (rowIndex == 0) {
          for (let i = 0; i < this.goodsList.length; i++) {
            if (this.goodsList[i].orderId == row.orderId) {
              return {
                rowspan: this.goodsList[i].goodsList.length,
                colspan: 1
              }
            }
          }
        }
      }
    },

    objectRentSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 11) {
        if (rowIndex == 0) {
          for (let i = 0; i < this.goodsList.length; i++) {
            if (this.goodsList[i].orderId == row.orderId) {
              return {
                rowspan: this.goodsList[i].goodsList.length,
                colspan: 1
              }
            }
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.YWC {
  padding: 50px 100px;
  .ele-title-2 {
    margin-top: 40px;
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
    }
  }
  .ele-Payment {
    border: 2px solid #f3f3f3;
    border-radius: 5px;
    padding-left: 20px;
    .Payment-top,
    .Payment-bottom {
      display: flex;
      flex-wrap: wrap;
      p {
        width: 500px;
        display: flex;
        align-items: flex-start;
        span:first-child {
          display: inline-block;
          min-width: 80px;
        }
        span:last-child {
          display: inline-block;
        }
      }
    }
    .Payment-top {
      .cus-font {
        color: gray;
      }
    }
  }
  .ele-button {
    margin: 30px 0px 30px 0px;
    .ele-btn {
      width: 100px;
    }
  }
  .custom-radio {
    margin: 30px 0px;
  }
  .cus-baoguo {
    border-radius: 5px;
    border: 1px solid #e6e6e6;
    display: flex;
    .left,
    .right {
      padding: 30px;
    }
    .left {
      flex-basis: 60%;
      border-right: 1px solid #e6e6e6;
      position: relative;
      .cus-btns {
        position: absolute;
        display: flex;
        right: 0;
        top: 0;
        .el-button {
          margin: 0px 20px;
        }
      }
      .tops {
        p {
          margin: 10px 0px;
          span:first-child {
            display: inline-block;
            width: 80px;
          }
        }
        .cus-middle {
          margin: 0;
          padding: 0;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .margin {
            margin-right: 20px;
          }
          .el-button {
            margin-left: 20px;
          }
        }
      }
      .bottoms {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        .cus-list {
          width: 400px;
          display: flex;
          align-items: center;
          .cus-left {
            width: 100px;
            height: 100px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .cus-right {
            margin-left: 20px;
            .cus-font {
              font-size: 14px;
              color: gray;
            }
          }
        }
      }
    }
    .right {
      flex-grow: 1;
      position: relative;
      .right-title {
        position: absolute;
        top: 10px;
      }
    }
  }
  .ele-content-info {
    background: #f3f3f3;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
    ul,
    li {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    ul {
      padding: 20px 60px 20px 20px;
      li {
        padding: 10px 0px;
        font-size: 15px;
        display: flex;
        align-items: flex-start;
      }
      .ele-title-txt {
        font-size: 16px;
        font-weight: bold;
        margin-right: 20px;
      }
      .ele-font {
        color: gray;
      }
      .ele-font-left {
        display: inline-block;
        width: 80px;
      }
      .shdz,
      .mddz {
        display: inline-block;
        width: 300px;
      }
    }
  }

  .ele-table {
    margin-top: 40px;
    .custom {
      font-size: 12px;
      display: inline-block;
      background: #2db300;
      color: white;
      padding: 1px 5px;
    }
  }
  .ele-bzm {
    display: flex;
    justify-content: space-between;
    .ele-p-right {
      span:last-child {
        margin-left: 20px;
      }
    }
  }
  .el-dialog {
    .TBRBTU-information {
      .flex {
        display: flex;
        align-items: center;
        margin: 20px 0px;
      }
      .cus-h4 {
        width: 80px;
        padding: 0;
        margin: 0px;
      }
      .cus-radio {
        padding: 0;
        margin: 0px;
        .el-input {
          width: 300px;
        }
      }
    }
    .TBRBTU-detail {
      .cus-h4 {
        width: 80px;
      }
      .cus-list {
        width: 400px;
        display: flex;
        align-items: center;
        .cus-left {
          width: 100px;
          height: 100px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .cus-right {
          margin-left: 20px;
          .cus-font {
            font-size: 14px;
            color: gray;
          }
        }
      }
    }
    .TBRBTU-mode {
      margin-top: 40px;
      .cus-h4 {
        width: 80px;
      }
      .cus-wuliu {
        p {
          span {
            font-size: 14px;
            margin-right: 10px;
          }
          .el-select,
          .el-input {
            width: 200px;
          }
        }
      }
      .cus-Distribution {
        display: flex;
        .left,
        .right {
          width: 400px;
        }
      }
    }
    .footer {
      .cus-btn-item {
        margin-top: 30px;
        margin-left: 80px;
        .el-button {
          width: 200px;
        }
      }
    }
  }
}
</style>
